<template>
  <div>
    <div
      class="search-box"
    >
      <el-input
        v-model="keyword"
        clearable
        placeholder="支持用户名/姓名"
        class="search-item"
        @keydown.enter.native="search"
      />
      <el-button
        icon="qax-icon-Search"
        type="primary"
        @click="search"
      >搜索</el-button>
    </div>
    <div class="tool-box">
      <el-button
        icon="qax-icon-Alone-Plus"
        type="primary"
        @click="showAdd"
      >新增</el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="data"
    >
      <el-table-column
        prop="username"
        label="用户名"
      />
      <el-table-column
        prop="name"
        label="姓名"
      />
      <el-table-column
        prop="phone"
        label="电话号码"
      />
      <el-table-column
        label="操作"
      >
        <template #default="{row}">
          <el-link
            :underline="false"
            type="primary"
            @click="showEdit(row)"
          >编辑</el-link>
          <el-link
            :underline="false"
            style="margin-left: 8px;"
            type="danger"
            @click="handleDelete(row._id)"
          >
            删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
        :current-page="current"
        :total="total"
        :page-size="pageSize"
        small
        @current-change="handlePageChange"
      />
    </div>
    <add-edit
      ref="addEdit"
      @success="getList"
    />
  </div>
</template>
<script>
import http from '@/http.js'
import AddEdit from './add-edit.vue'
export default {
  components: {
    'add-edit': AddEdit
  },
  data () {
    return {
      data: [],
      loading: false,
      keyword: '',
      current: 1,
      pageSize: 5,
      total: 0
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      http.get('/user', {
        params: {
          keyword: this.keyword,
          offset: (this.current - 1) * this.pageSize,
          limit: this.pageSize
        }
      })
        .then(res => {
          this.data = res.list
          this.total = res.count
          if (this.data.length === 0 && this.current > 1) {
            this.current--
            this.getList()
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    search () {
      this.current = 1
      this.getList()
    },
    showAdd () {
      this.$refs.addEdit.show('add')
    },
    showEdit (row) {
      this.$refs.addEdit.show('edit', row)
    },
    handleDelete (id) {
      this.$confirm('确认删除该用户？', '删除用户')
        .then(() => {
          http.delete(`/user/${id}`)
            .then(() => {
              this.$message({ message: '操作成功', type: 'success' })
              this.getList()
            })
        })
    },
    handlePageChange (current) {
      this.current = current
      this.getList()
    }
  }

}
</script>
<style lang="scss" scoped>
.search-box {
  padding: 16px 0;
  .search-item {
    width: 240px;
    margin-right: 8px;
  }
}
.tool-box {
  padding: 8px 0;
}
.page-box {
  padding: 16px 0;
}
</style>
